<template>
  <div style="border-bottom: 1px solid #373838">
    <el-collapse accordion>
      <el-collapse-item title="柱体设置">
        <el-form-item :label="$t('柱条宽度')">
          <el-input-number
            v-model="myConfig.barWidth"
            :min="0"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
        <el-form-item :label="$t('圆角')" class="l_number_set">
          <span class="r_50width l_input_span3">
            <el-input-number
              v-model="myConfig.radiusTop"
              controls-position="right"
              class="r_50width l_input_number"
            >
            </el-input-number>
            <span class="l_input_num3" style="line-height: 32px">上</span>
          </span>
          <span class="r_50width l_input_span3">
            <el-input-number
              v-model="myConfig.radiusBottom"
              controls-position="right"
              class="r_50width l_input_number"
            >
            </el-input-number>
            <span class="l_input_num3" style="line-height: 32px">下</span>
          </span>
          <span class="r_50width l_input_span3">
            <el-input-number
              v-model="myConfig.radiusLeft"
              controls-position="right"
              class="r_50width l_input_number"
            >
            </el-input-number>
            <span class="l_input_num3" style="line-height: 32px">左</span>
          </span>
          <span class="r_50width l_input_span3">
            <el-input-number
              v-model="myConfig.radiusRight"
              controls-position="right"
              class="r_50width l_input_number"
            >
            </el-input-number>
            <span class="l_input_num3" style="line-height: 32px">右</span>
          </span>
        </el-form-item>
        <el-form-item label="是否堆叠">
          <el-switch v-model="myConfig.isStack" class="float_right"></el-switch>
        </el-form-item>
        <el-form-item label="背景色">
          <el-switch
            v-model="myConfig.showBackground"
            class="float_right"
          ></el-switch>
        </el-form-item>
        <el-form-item
          :label="$t('颜色')"
          class="form_item_margin"
          v-if="myConfig.showBackground"
        >
          <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.backgroundColor"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input v-model="myConfig.backgroundColor" class="r_160width">
          </el-input>
        </el-form-item>
        <el-form-item label="边框">
          <el-switch
            v-model="myConfig.showBorder"
            class="float_right"
          ></el-switch>
        </el-form-item>
        <el-form-item :label="$t('边框样式')" class="form_item_margin l_number_set" v-if="myConfig.showBorder">
      <span class="l_color_box r_margin_right8">
        <l-input-color
          v-model="myConfig.barBorderColor"
          :notInput="true"
        ></l-input-color>
      </span>
      <el-input
        v-model="myConfig.barBorderColor"
        class="r_96width r_margin_right8"
      >
      </el-input>
      <span class="r_52width l_input_span r_margin_right1 l_input_span_left42">
        <el-input-number
          v-model="myConfig.barBorderPx"
          controls-position="right"
          class="r_52width l_input_number"
        >
        </el-input-number>
      </span>
    </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {};
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
};
</script>